package ;
import easelhx.display.Container;
import easelhx.display.DOMElement;
import easelhx.display.Shape;
import easelhx.utils.Ticker;
import js.JQuery;
import js.Lib;

/**
 * ...
 * @author 
 */

class HtmlElementsExample extends Example, implements IExample
{

	public function new() 
	{
		super();
	}
	
	/* INTERFACE IExample */
	
	override public function run():Void 
	{
		new JQuery("body").css("margin","0");
		new JQuery(".canvasHolder").prepend('<div id="foo" style="z-index: 1; position: absolute; background-color: #FF0000; width:320px; height:260px; padding: 5px; visibility: hidden;"><b>Hello! Im an HTML div.</b><br/><br/>I am not rendered to the canvas, but I can be included in the display list for positioning and transformations.<br/><br/>This means I can contain any HTML content (rich text, forms, video, etc), but Im not a full part of the EaselJS display list.<br/><br/><a href="http://easeljs.com/">This is a link</a></div>');
	
		var container:Container = new Container();
		stage.addChild(container);

		var frame:Shape = new Shape();
		frame.graphics.beginFill("#00F").drawRect(0, 0, 340, 280);
		frame.regX = 170;
		frame.regY = 140;
		
		var box:Shape = new Shape();
		box.graphics.beginFill("#ff0000");
		box.graphics.drawRect(0, 0, 100, 100);
		stage.addChild(box);
		
		var content:DOMElement = new DOMElement(Lib.document.getElementById("foo"));
		content.regX = 165;
		content.regY = 135;
		//content.alpha = .5;
		//content.visible = false;

		var o = content.clone();
		stage.addChild(o);

		container.addChild(frame);
		container.addChild(content);
		
		container.x = 300; 
		container.y = 200;
		container.alpha = .6;
		container.rotation = 25;
		//container.scaleX = 1.5;
		//container.visible = false;

		Ticker.addListener(stage);
		stage.update();
	}
	
	
}